<template>
  <div class="audieDetail">
    <div class="flowCanvas">

      <G6_readOnly ref="G6Comp_ref" :workflowInstanceChat="workflowInstanceChat">
      </G6_readOnly>

    </div>
    <div class="flowProcess">
      <div class="flowProcess_top">
        <div class="title">
          基本信息
        </div>
        <div v-for="item in dataForm" class="info">
          <span class="label">{{ item.label }}</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
      <div class="flowProcess_bottom" id="flowProcess_bottom">
        <div class="title">
          审核事件列表
        </div>
        <!-- 工作流的table表格 -->
        <baseTable :columns="columns.workFlowAuditColumns" :dataSource="configData.records"
          :isShowPagination="isShowPagination" :total="configData.total" :isSelect="true" :scroll="scroll"
          :rowSelection="1" :customRow="customRow">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>
            <template v-if="column.dataIndex === 'flowScene'">
              <p v-if="record.flowScene == 1">内容发布</p>
              <p v-else-if="record.flowScene == 2">投票调查</p>
              <p v-else="record.flowScene==3">领导信箱</p>
            </template>
            <template v-if="column.dataIndex === 'oparation'">
              <a class="eidtRecords" v-if="record.details" @click="justifyDtail(record)">
                查看会签详情
              </a>
              <a @click="downLoad(record)">下载修正内容</a>
            </template>
          </template>
        </baseTable>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, onBeforeMount, nextTick } from "vue"
import { splitInit } from '../../../utils/split-init';
import G6_readOnly from './G6/G6-readOnly.vue';
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { useRoute } from "vue-router";
import request from '@/api/index';
import { getTableScroll } from "@/components/table/tableConfig/table"
// TS
interface dataSourceType {
  [propName: string]: any;
}
//data
//路由信息
const routeParams: dataSourceType = useRoute().query;
const dataForm = ref<dataSourceType[]>([
  {
    label: '审批发起时间:',
    params: 'submitTime',
    value: ''
  }, {
    label: '审批结束时间:',
    params: 'completeTime',
    value: ''
  }, {
    label: '审批发起人:',
    params: 'submitUser',
    value: ''
  }, {
    label: '工作流场景:',
    params: 'flowSceneStr',
    value: ''
  }, {
    label: '审批状态:',
    params: 'statusDesc',
    value: ''
  }, {
    label: '当前审批人:',
    params: 'curAuditUsers',
    value: ''
  },
])
// 工作流数据
const workflowInstanceChat = ref<dataSourceType>({});
const G6Comp_ref = ref();
//表格相关数据
const isShowPagination = false; // 是否需要配分页器
let scroll: dataSourceType = reactive({ y: '', isFixed: false })
//工作流表格数据
let configData = ref<dataSourceType>({ total: 0, size: 10, records: [] });

//methods
// 获取已上传的流程图数据
const getWorkFlowData = () => {
  let params = {
    instanceId: routeParams.id
  }
  request.fetchWorkFlowInstanceDetail(params).then((res: dataSourceType) => {
    let data = res;
    workflowInstanceChat.value = res.workflowInstanceChat;
    dataForm.value.forEach((item: dataSourceType) => {
      item.value = data[item.params]
    });
    configData.value.records = data.opRecords;
    nextTick(() => {
      scroll.y = getTableScroll(130, "worflowTableContent", 320).y;
    });
  })
}
// 点击列表，查看会前详情
const justifyDtail = (record: dataSourceType) => {

}
//下载修正详情
const downLoad = (record: dataSourceType) => {

}
const customRow = (record: dataSourceType) => {

  return {
    // 鼠标移入行
    onMouseenter: (event: any) => {
      let id = 0;
      workflowInstanceChat.value.nodeViews.forEach((item: dataSourceType) => {
        if (item.nodeCode == record.nodeId) {
          id = item.id;
        }
      })
      if (id) {
        const node = G6Comp_ref.value.graph.findById(id);
        G6Comp_ref.value.graph.setItemState(node, 'error', true);
      }
    },
    // 鼠标移出行
    onMouseleave: (event: any) => {
      let id = 0;
      workflowInstanceChat.value.nodeViews.forEach((item: dataSourceType) => {
        if (item.nodeCode == record.nodeId) {
          id = item.id;
        }
      })
      if (id) {
        const node = G6Comp_ref.value.graph.findById(id);
        G6Comp_ref.value.graph.setItemState(node, 'error', false);
      }
    }

  };
}

//onBeforeMount
onBeforeMount(() => {
  getWorkFlowData()
})
//onMounted
onMounted(() => {
  splitInit('.flowCanvas', '.flowProcess', 329, 500)
})
</script>

<style lang="less" scoped>
.audieDetail {
  display: flex;
  height: calc(100% - 84px);
  overflow: hidden;
  padding: 24px;
  background: #fff;

  .flowCanvas {
    min-width: 329px;
    flex: 1;
    height: 100%;
    padding-right: 24px;
    overflow: hidden;
  }

  .flowProcess {
    min-width: 500px;
    background: #fff;
    height: 100%;
    padding-left: 24px;

    .title {
      padding: 9px 24px;
      background: #F7F8FA;
      position: relative;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 22px;

      &:after {
        content: '';
        position: absolute;
        top: 13px;
        left: 12px;
        width: 3px;
        height: 14px;
        background: #1F6DED;
      }
    }

    .flowProcess_top {
      .info {
        margin-top: 24px;
        margin-left: 32px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;

        .label {
          width: 88px;
          text-align: right;
          display: inline-block;
        }

        .value {
          margin-left: 12px;
        }
      }

    }

    .flowProcess_bottom {
      height: calc(100% - 310px);
      overflow: hidden;

      .title {
        margin-top: 40px;
        margin-bottom: 24px;
      }
    }
  }


}
</style>
<style lang="less" >
.g6-grid-container {
  height: auto !important;
}
</style>